<template>
  <div id="index" :class="{collapse:isCollapse}">
    <div class="header">
      <div class="logo">
        <div class="logo-text">
          <img :src="logoImg" alt="logo" />
          <span>保驾犬后台管理系统</span>
        </div>
      </div>
      <div class="tools">
        <Poptip trigger="hover" placement="bottom-end" width="200">
          <div class="username"><Icon type="person"></Icon><span>{{userName}}</span><Icon type="ios-arrow-down"></Icon></div>
          <div slot="content" class="btn-poptip">
            <ul >
              <!-- <li @click="editMineInfo"><Icon type="person"></Icon><span>修改信息</span></li> -->
              <li @click="openEditPwd"><Icon type="key"></Icon><span>修改密码</span></li>
            </ul>
            <ul>
              <li @click="changelogout"><Icon type="log-out"></Icon><span>退出</span></li>
            </ul>
          </div>
        </Poptip>
        <div class="qrcode">
          <a @click="showDwQrCode" title="APP下载二维码"><i class="fa fa-qrcode" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="left-menu" :class="{'nohover-menu':!isHoverMenu}" @mouseover="changeIsHover(true)" @mouseout="changeIsHover(false)">
        <div class="search-menu">
          <Select placeholder="搜索菜单" :value="path" @on-change="toPath" filterable >
              <Option v-for="(v,i) in menuList" v-if="v.to" :value="v.to" :key="`index-ml-key-${i}`">{{v.text}}</Option>
          </Select>
          <Button type="primary" @click="changeCollapse"><Icon type="navicon"></Icon></Button>
        </div>


        <Menu :accordion='true' class="menu" ref="leftMenu" theme="dark" width="auto" :open-names="openName" :active-name="path" @on-select="toPath">
          <template v-for="(item,index) in menu">
            <MenuItem v-if="!item.children" :name="item.to" :key="`1-${index}`" class="menu-title" >
              <Icon :type="item.icon"></Icon><span >{{item.text}}</span>
            </MenuItem>
            <Submenu v-else :name="item.name" :key="`2-${index}`">
              <div slot="title" class="menu-title">
                <Icon :type="item.icon"></Icon><span >{{item.text}}</span>
              </div>
              <div class="menu-list">
                <MenuItem v-for="(child,c_index) in item.children" :name="child.to" :key="`2-${index}-${c_index}`" >
                  {{child.text}}
                </MenuItem>
              </div>
            </Submenu>
          </template>
        </Menu>

      </div>
      <div class="content" >
        <router-view/>
      </div>
    </div>

    <EmployeeModal :value="empModal.empid" :show="empModal.show" :options="empModal.empopts" @close="closeEditMineInfo" @edit="onMineInfoEdit"></EmployeeModal>
    <EditPassword :employee="editPwdModal.employee" :show="editPwdModal.show" @close="closeEditPwd" @success="onEditPwdSuccess"></EditPassword>

    <Modal v-model="qrmodal" title="APP下载二维码" :footer-hide="true" width="310px;">
      <img src="@/assets/images/qrCode.png" />
    </Modal>
  </div>
</template>
<style lang="less" src="@/assets/styles/layout.less"></style>

<script>
  import {mapActions,mapState}  from 'vuex'
  import logoImg                from '@/assets/images/logo1.png'
  import EmployeeModal          from './system/EmployeeModal'
  import EditPassword           from './system/EditPassword'

  export default {
    components:{
      EmployeeModal,EditPassword
    },
    data () {
      return {
        logoImg,
        isHoverMenu:false,
        modalShow:false,
        empModal:{
          empid:'',
          show:false,
          empopts:{
            isedit:true,
            title:'修改我的信息'
          },
        },
        editPwdModal:{
          show:false,
          employee:{id:'',loginName:''}
        },
        isCollapse:false,
        isFullScreen:false,
        // menu:[
        //   {text:'实时监控',icon:'ios-videocam',to:''},
        //   {text:'历史轨迹',icon:'android-map',to:''},
        //   {
        //     text:'司机视图',icon:'person',name:'driver',
        //     children:[
        //       {text:'司机视图',to:'/driver/view'},
        //       {text:'司机统计',to:''}
        //     ]
        //   },
        //   {
        //     text:'车队视图',icon:'person-stalker',name:'fleet',
        //     children:[
        //       {text:'车队视图',to:'/fleet/view'}, // 车队安全报表
        //       {text:'车队统计',to:'/fleet/statistics'}  // 车队汇总报表
        //     ]
        //   },
        //   {
        //     text:'安全排名',icon:'ios-list-outline',name:'rank',
        //     children:[
        //       {text:'公司排名',to:'/rank/group'},  //
        //       {text:'队内排名',to:'/rank/internal'}
        //     ]
        //   },
        //   {
        //     text:'违章管理',icon:'android-alert',name:'violation',
        //     children:[
        //       {text:'违章视图',to:'/violation/view'},
        //       {text:'违章清单',to:'/violation/list'}
        //     ]
        //   },
        //   {
        //     text:'事故管理',icon:'nuclear',name:'accident',
        //     children:[
        //       {text:'事故清单',to:''},
        //       {text:'事故上报',to:''},
        //       {text:'事故统计',to:''}
        //     ]
        //   },
        //   {text:'预警记录',icon:'android-warning',to:''},
        //   {text:'排班查看',icon:'calendar',to:'/sche/sche'},
        //   {text:'公告提醒',icon:'speakerphone',to:''},
        //   {
        //     text:'统计汇总',icon:'stats-bars',name:'statistics',
        //     children:[
        //       {text:'车队汇总报表',to:''},
        //       {text:'区域安全指数',to:'/statistics/regionalSafety'},
        //       {text:'在线统计',to:''}
        //     ]
        //   },
        //   {
        //     text:'基础信息管理',icon:'android-options',name:'baseinfo',
        //     children:[
        //       {text:'司机管理',to:'/baseinfo/driver'},
        //       {text:'车辆管理',to:'/baseinfo/vehicle'}
        //     ]
        //   },
        //   {
        //     text:'系统维护',icon:'gear-b',name:'system',
        //     children:[
        //       {text:'机构管理',to:'/system/organization'},
        //       {text:'岗位管理',to:'/system/job'},
        //       {text:'用户设置',to:'/system/employee'}
        //     ]
        //   },
        //   {
        //     text:'运营管理',icon:'folder',name:'operation',
        //     children:[
        //       {text:'物流公司管理',to:'/operation/logisticsCompany'},
        //       {text:'销售管理',to:'/operation/seller'},
        //       {text:'对账单',to:'/operation/statementAccount'},
        //       {text:'司机管理',to:'/operation/driver'},
        //       {text:'统计汇总',to:'/operation/statisticsSummary'},
        //       {text:'在线统计',to:'/operation/statisticsOnline'},
        //       {text:'入网统计',to:'/operation/statisticsNetwork'}
        //     ]
        //   }
        // ]
        qrmodal:false,
      }
    },
    mounted(){
      this.initIndex();
      this.collapsePage();
    },
    watch:{
      isCollapse(){
        this.resize();
        if(this.isCollapse) this.isHoverMenu = false;
      },
      path(){
        this.collapsePage();
      }
    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('router',['path']),
      openName(){
        let p = this.path.split("/")[1];
        if (p === 'login') return [];
        this.$nextTick(()=>this.$refs.leftMenu.updateOpened());
        return p?[p]:[];
      },
      menu(){
        let menus = this.createMenus(0);
        return menus;
      },
      menuList(){
        let menulist = [];
        this.menu.forEach(e=>e.children?menulist.push(...e.children):menulist.push(e));
        return menulist;
      },
      userName(){
        let userinfo = this.userinfo||{};
        let employee = userinfo.employee||{};
        let name = employee.empName||'';
        return name;
      }
    },
    methods:{
      ...mapActions('base',['initIndex','logout','setUserinfo','resize']),
      changelogout(){
        this.logout();
      },
      changeIsHover(v){
        this.isHoverMenu = v;
      },
      // 递归权限菜单
      createMenus(pid = 0){
        let ary = [];
        this.userinfo.resources.forEach(m => {
          let menu = {text:m.name,to:m.url};
          if (m.parentId === 0){
            menu.icon = m.img;
          }
          if (m.parentId === pid){
            if (m.son > 0){
              let name = m.sonurls.substring(1);
              name = name.substring(0,name.indexOf('/'));
              menu.name = name;
              menu.children = this.createMenus(m.id);
            }
            ary.push(menu);
          }
        });
        return ary;
      },
      changeCollapse(){
        this.isCollapse = !this.isCollapse;
        this.resize();

        // 手动触发window.resize事件
        this.$nextTick(() => {
          let event = document.createEvent('Event');
          event.initEvent("resize", true, true);
          window.dispatchEvent(event);
        });
      },
      toPath(path){
        if (!path) return;
        if(path !== this.path){
          if(path.indexOf('/monitor/historypath')>-1){
            this.isCollapse = true;
          }
          this.$router.push(path);
        }
      },
      editMineInfo(){
        this.empModal.empid = this.userinfo.id
        this.empModal.show = true;
      },
      closeEditMineInfo(){
        this.empModal.show = false;
      },
      onMineInfoEdit(employee){
        // this.userinfo.empName = employee.empName;
        // this.userinfo.phone = employee.phone;
        // this.userinfo.email = employee.email;
        this.setUserinfo(this.userinfo);
      },
      openEditPwd(){
        let employee = this.userinfo.employee;
        this.editPwdModal.employee = {id:employee.id,loginName:employee.loginName};
        this.editPwdModal.show = true;
      },
      closeEditPwd(){
        this.editPwdModal.show = false;
      },
      onEditPwdSuccess(){
        this.$Modal.info({
          title: '密码修改提示',
          content: '当前账号登录密码已修改，请重新登录',
          onOk:() => {
            this.changelogout();
          }
        });
      },
      collapsePage(){
        if(this.path.indexOf('/driver/view')>-1){
          this.isCollapse = true;
        }else if(this.path.indexOf('/operation/driver')>-1){
          this.isCollapse = true;
        }else if(this.path.indexOf('/history')>-1){
          this.isCollapse = true;
        }else if(this.path.indexOf('/home')>-1){
          this.isCollapse = true;
        }
      },
      showDwQrCode(){
        this.qrmodal = true;
      }
    }
  }
</script>
